<template>
	<div>
		<div class="py_5 px_10">
			<el-row>
				<el-col :span="2">
					<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
				</el-col>
				<el-col :span="22">
					<el-form :inline="true" class="form-inline fr">
						<el-form-item class="w_80">
							<el-select v-model="city_arr" placeholder="全部城市" @change="changeBtndialog">
								<el-option
									v-for="item in cityList"
									:key="item.id"
									:label="item.city_name"
									:value="`${item.id}|${item.city_name}`"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-select v-model="area_arr" multiple collapse-tags placeholder="全部商圈">
								<el-option
									v-for="item in areaList"
									:key="item.id"
									:label="item.area_name"
									:value="`${item.id}|${item.area_name}`"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="date1">
							<el-date-picker
								size="mini"
								type="date"
								class="w_120i"
								value-format="yyyy-MM-dd"
								placeholder="开始日期"
								v-model="ruleForm.date1"
								:picker-options="pickerOptions0"
							></el-date-picker> </el-form-item
						>~
						<el-form-item prop="date2">
							<el-date-picker
								size="mini"
								type="date"
								class="w_120i"
								value-format="yyyy-MM-dd"
								placeholder="结束日期"
								v-model="ruleForm.date2"
								:picker-options="pickerOptions0"
							></el-date-picker>
						</el-form-item>
						<el-button size="mini" type="primary" class="round-right" @click="shearchBtn">搜索</el-button>
						<el-button size="mini" round @click="resetBtn">重置</el-button>
					</el-form>
				</el-col>
			</el-row>
		</div>
		<template>
			<el-table :data="demandList" stripe>
				<el-table-column prop="id" label="序号" width="60" align="center">
					<template slot-scope="{ row, $index }">
						<span>{{ row.id }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="date" label="日期" align="center"></el-table-column>
				<el-table-column prop="city_name" label="城市" align="center"></el-table-column>
				<el-table-column prop="area_name" label="商圈" align="center"></el-table-column>
				<el-table-column prop="worker_sum" label="累计出工人数" align="center"></el-table-column>
				<el-table-column prop="worker_new" label="新增出工人数" align="center"></el-table-column>
				<el-table-column prop="worker_num" label="出工人数" align="center"></el-table-column>
				<el-table-column prop="dau" label="日活跃率" align="center">
					<template slot-scope="{ row, $index }">
						<span>{{ row.dau | percentage }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="hour_expect_finish" label="计划出工总时长" align="center"></el-table-column>
				<el-table-column prop="hour_actual_finish" label="实际出工总时长" align="center"></el-table-column>
				<el-table-column prop="hour_expect_per" label="计划人均时长" align="center"></el-table-column>
				<el-table-column prop="hour_actual_per" label="实际人均时长" align="center"></el-table-column>
				<el-table-column label="时段分布" align="center">
					<el-table-column prop="ratio_morning" label="早班" align="center">
						<template slot-scope="{ row, $index }">
							<span>{{ row.ratio_morning | percentage }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="ratio_noon" label="中班" align="center">
						<template slot-scope="{ row, $index }">
							<span>{{ row.ratio_noon | percentage }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="ratio_evening" label="晚班" align="center">
						<template slot-scope="{ row, $index }">
							<span>{{ row.ratio_evening | percentage }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="ratio_night" label="夜班" align="center">
						<template slot-scope="{ row, $index }">
							<span>{{ row.ratio_night | percentage }}</span>
						</template>
					</el-table-column>
				</el-table-column>
			</el-table>
			<!-- 分页组件 -->
			<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
		</template>
		<!-- <el-row :gutter="15" class="Module3">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="Module3-box mt_20 box-shadow">
                    <div class="card-header card-header-two">
                        <h4>近7天店铺数据</h4>
                    </div>
                    <div class="Module3-box-twoBox">
                        <div class="Module3-two-content">
                            <template>
                                <echarts></echarts>
                            </template>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="Module3-box mt_20 box-shadow">
                    <div class="card-header card-header-three">
                        <h4>近7天人才数据</h4>
                    </div>
                    <div class="Module3-box-threeBox">
                        <div class="Module3-three-content">
                            <template>
                                <echartsTwo></echartsTwo>
                            </template>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row> -->
	</div>
</template>

<script>
var common = require('../../../../static/tool.js')
import echarts from './echarts.vue'
import echartsTwo from './echartstwo.vue'
export default {
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,

			demandList: [], //店铺列表
			//搜索对应值
			areaList: [],
			weekList: [], //结束周
			cityList: [], //城市列表
			city_arr: '',
			city_id: '',
			city_name: '',
			area_arr: '', //商圈信息
			area_id: '',
			area_name: '',
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},
			// 设置只能选择当前日期之前的日期
			pickerOptions0: {
				disabledDate(time) {
					return time.getTime() >= Date.now() - 8.64e7 //如果没有后面的-8.64e7就是不可以选择今天的
				}
			},
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20
		}
	},
	components: { echarts, echartsTwo },
	computed: {
		city_value() {
			return this.city_arr
		}
	},
	watch: {
		//商圈改变
		areaList(newValue, oldValue) {
			if (oldValue == '') {
				this.listShop()
			}
		},
		city_value(newVal, oldVal) {
			if (oldVal) {
				let [id, name] = oldVal.split('|')
				if (id === '北京') {
					id = 1
				}
				// 存储旧的商圈数据
				this.selectedAreasMap[`city-${id}`] = this.area_arr
			}
			console.log('存储值', this.selectedAreasMap)
			if (newVal && this.city_id) {
				this.listArea(this.city_id) //商圈列表
			}
		}
	},
	created() {
		//时间的默认选中
		// var d = this.date(0);
		// this.ruleForm.date1 = d;
		// var e = this.date(2);
		// this.ruleForm.date2 = e;
		//时间的默认选中
		this.selectedAreasMap = {}
		var d = this.date(-1)
		this.ruleForm.date1 = d
		this.ruleForm.date2 = d
		this.getcityList()
	},
	mounted() {},
	methods: {
		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},
		listShop() {
			//获取列表
			let s_departmentIds_Arr = new Array()
			this.area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id.toString())
			})
			let fn = new FormData()
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数
			fn.append('city_id', this.city_id)
			fn.append('area_id', s_departmentIds_Arr)
			//判断时间框是否存在值
			if (this.ruleForm.date1 == null || this.ruleForm.date1 == '') {
				this.$message.error('请选择开始时间！')
				return
			}
			if (this.ruleForm.date2 == null || this.ruleForm.date2 == '') {
				this.$message.error('请选择结束时间！')
				return
			}
			fn.append('date_start', this.ruleForm.date1)
			fn.append('date_end', this.ruleForm.date2)

			this.$http.post(this.url + '/report/listDay', fn).then(
				res => {
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						if (res.data.data != null) {
							this.demandList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.demandList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//获取城市列表
		getcityList() {
			let fn = new FormData()
			this.$http.post(this.url + '/city/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.cityList = res.data.data.list
						this.city_arr = this.cityList[0].city_name
						this.city_id = this.cityList[0].id
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//获取商圈列表
		listArea(city_id) {
			this.area_arr = []
			let fn = new FormData()
			fn.append('city_id', city_id)
			this.$http.post(this.url + '/area/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.area_name
							})
							this.areaList = res.data.data.list
							// if (this.area_arr == '' || this.area_arr == null) {
							// 	// 默认选中非254-平谷的
							// 	this.areaList.forEach(element => {
							// 		// 平谷
							// 		if (element.area_name != '平谷') {
							// 			var pusharr = element.id + '|' + element.area_name
							// 			this.area_arr.push(pusharr)
							// 		}
							// 	})
							// }
							if (this.selectedAreasMap[`city-${city_id}`] && this.selectedAreasMap[`city-${city_id}`].length) {
								this.area_arr = this.selectedAreasMap[`city-${city_id}`]
							}
						} else {
							this.areaList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		changeBtndialog() {
			let [id, name] = this.city_arr.split('|') // es6 数组解构赋值
			this.city_id = id.toString()
			this.city_name = name.toString()
		},
		changeBtndialogarea() {
			let [id, name] = this.area_arr.split('|') // es6 数组解构赋值
			this.area_id = id.toString()
			this.area_name = name.toString()
		},
		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listShop()
		},
		resetBtn() {
			//重置
			// this.resetDataAdd() //重置请求数据
			this.getcityList()
			this.pageNum = 1
			this.listShop()
		},
		resetDataAdd() {
			this.city_arr = ''
			this.city_id = ''
			this.city_name = ''
			this.area_arr = '' //商圈信息
			this.area_id = ''
			this.area_name = ''
		},
		downloadOrder() {
			let s_departmentIds_Arr = new Array()
			this.area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id)
			})

			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				city_id: this.city_id,
				area_id: s_departmentIds_Arr.join(','),
				date_start: this.ruleForm.date1,
				date_end: this.ruleForm.date2
			}

			let param = $.param(obj)
			window.location.href = this.url + '/report/exportListDay?' + param
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listShop()
		}
	},
	filters: {}
}
</script>

<style scoped>
.search_box {
	width: 790px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
.main_user {
	background: var(--zfy-red);
	color: #fff;
	text-decoration: none;
	padding: 2px 4px;
	border-radius: 4px;
}
.row-info {
	padding: 10px 0;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}
</style>



// WEBPACK FOOTER //
// src/components/sheet/shop/one.vue